<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>贵美商城注册验证</title>
		<style>
			#dd{
				
				background-color: aqua;
				height: 600px;
				width: auto;
				
			}
			#firstname{
				background-image: url("image/user-3-line.png");
				background-repeat: no-repeat;
				padding-left: 30px;
				line-height: 20px;
				margin: 10px auto;
			}
			#name{
				background-image: url("image/user-3-line.png");
				background-repeat: no-repeat;
				padding-left: 30px;
				line-height: 20px;
				margin: 10px auto;
			}
			#username{
				background-image: url("image/user-3-line.png");
				background-repeat: no-repeat;
				padding-left: 30px;
				line-height: 20px;
				margin: 10px auto;
			}
			#password,#confirmpsw{
				background-image: url("image/key-2-line.png");
				background-repeat: no-repeat;
				padding-left: 30px;
				line-height: 20px;
				margin: 10px auto;
			}
			#email{
				background-image: url("image/mail-line.png");
				background-repeat: no-repeat;
				padding-left: 30px;
				line-height: 20px;
				margin: 10px auto;
			}
			#register{
				background-color: blue;
				color: azure;
				margin: 10px 30px;
				height: 30px;
				width: 80px;
				border: 1px solid lightgrey;
			}
			#ss{
				background-color: blue;
				color: aliceblue;
				margin-left: 10px;
			}
			#reg{
				margin-left:10px;
				padding-left: 10px;
			}
		</style>
<script src="../js/jquery-3.6.3.min.js"></script>
		<script type="text/javascript">
			$(function(){
				var checkemail=checkfirstname=checkname=checkusername= checkpsd=checkconfirm = false;
				
				//checkemail
				$("#email").blur(function(){
					var email= $(this).val();
					var regExp=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/gi;
					var ok= regExp.test(email);
					if(email==""){
						$(this).next().text("邮箱不能为空").css("color","red");
						return checkemail=false;
					}else{
						if (ok) {
							$(this).next().text("√").css("color","green");
							return checkemail=true;
						} ;
						$(this).next().text("您输入的格式有误").css("color","red");
						return checkemail=false;
					};
				});
				
				//checkfirstname
				$("#firstname").blur(function(){
					var firstname= $(this).val();
					//var regExp=/^[\u4e00-\u9fa5][a-zA-Z]*$/;
					var regExp=/^[a-zA-Z\u4e00-\u9fa5]+$/;
					var ok= regExp.test(firstname);
					if(firstname==""){
						$(this).next().text("用户名不能为空").css("color","red");
						return checkfirstname=false;
						}else{
							if (ok) {
								$(this).next().text("√").css("color","green");
								return checkfirstname=true;
							} ;
							$(this).next().text("名字不能包含数字").css("color","red");
							return checkfirstname=false;
						};
				});
				//checkname
				$("#name").blur(function(){
					var name= $(this).val();
					var regExp=/^[\u4e00-\u9fa5]{1,4}$/;
					var ok= regExp.test(name);
					if(name==""){
						$(this).next().text("用户名不能为空").css("color","red");
						return checkname=false;
						}else{
							if (ok) {
								$(this).next().text("√").css("color","green");
								return checkname=true;
							} ;
							$(this).next().text("您输入姓氏有误").css("color","red");
							return checkname=false;
						};
				});
				//checkusername
				$("#username").blur(function(){
					var username= $(this).val();
					var regExp=/^[a-zA-Z]\w{5,17}$/gi;
					var ok= regExp.test(username);
					if(username==""){
						$(this).next().text("用户名不能为空").css("color","red");
						return checkusername=false;
						}else{
							if (ok) {
								$(this).next().text("√").css("color","green");
								return checkusername=true;
							} ;
							$(this).next().text("您输入的登户名有误").css("color","red");
							return checkusername=false;
						};
				});
				//checkpsd
				$("#password").blur(function(){
					var password= $(this).val();
					var regExp=/^[a-zA-Z]\w{5,17}$/gi;
					var ok= regExp.test(password);
					if(password==""){
						$(this).next().text("密码不能为空").css("color","red");
						return checkpsd=false;
					}else{
						if (ok) {
							$(this).next().text("√").css("color","green");
							return checkpsd=true;
						} ;
						$(this).next().text("密码必须大于等于6个字符").css("color","red");
						return checkpsd=false;
					}
						
					
				});
				// checkconfirm
				$("#confirmpsw").blur(function(){
					var confirmpsw= $(this).val();
					var password= $("#password").val();
					
					if (confirmpsw == password) {
						$(this).next().text("√").css("color","green");
						return checkconfirm=true;
					} ;
					$(this).next().text("两次密码不一致").css("color","red");
					return checkconfirm=false;
				});
				
			
				
				
				$("#register").click(function(){
					alert("提交");
					return checkemail&&checkfirstname&&checkname&&checkusername&& checkpsd&&checkconfirm;
				});
				
			});
		</script>
	</head>
	
	<body>
		<div id="dd">
			<form action="sss.html" id="formd">
				名字：<input type="text" name="firstname" id="firstname" required placeholder="名字"><span class="reg"> </span>
				<br>
				姓氏：<input type="text" name="name" id="name" required placeholder="姓氏"><span class="reg"> </span>
				<br>
				登录名：<input type="text" name="username" id="username" required placeholder="登陆名"><span class="reg">可包含下划线、字母和汉字</span><span class="reg"> </span>
				<br>
				密码：<input type="password" name="password" id="password" required placeholder="密码"><span class="reg"></span>
				<br>
				再次输入密码：<input type="password" name="password" id="confirmpsw" placeholder="再次输入密码"><span class="reg"></span>
				<br>
				电子邮箱：<input type="text" name="email" id="email" placeholder="请输入邮箱"><span class="reg"> </span>
				<br>
				<input type="submit" value="注册" id="register">
			</form>
		</div>
		
	</body>
</html>